<template>
  <div class="content" :style="customStyle">
    <div class="text-title" v-if="textTitle">
      {{ textTitle }}
      <a-tooltip placement="right" :title="titleDesc" v-if="titleDesc">
        <a-icon style="margin-left: 10px" type="question-circle" />
      </a-tooltip>
    </div>
    <slot></slot>
    <div class="rank-content" :id="id" :data="data" :color="color" :hollow="hollow" v-if="show"></div>
    <ul class="legend" v-if="customLegend">
      <li v-for="(item, index) in data" :key="index">
        <div class="legend-title" :style="{ color: color[index] }">
          <i
            :style="{
              background: color[index],
              width: itemFontSize + 'px',
              height: itemFontSize + 'px'
            }"
          ></i>
          {{ item.product }}
        </div>
        <span style="margin: 0 5px;">/</span>
        {{ _customPercent(item.count) }}%
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String
    },
    titleDesc: {
      type: String
    },
    textTitle: {
      type: String
    },
    customStyle: {
      type: String
    },
    legendRight: {
      default: 0
    },
    data: {
      type: Array,
      default: () => {
        return []
      }
    },
    // 是否空心
    hollow: {
      type: Boolean,
      default: false
    },
    color: {
      type: Array,
      default: () => {
        return ['#0DE8FB', '#0E6DE9', '#F4CD28', '#499A6F', '#A3D804', '#DE6B00']
      }
    },
    setKey: {
      type: Object
    },
    labelLine: {
      type: Boolean,
      default: false
    },
    itemGap: {
      type: Number,
      default: document.documentElement.clientHeight * 0.0426
    },
    legendType: {
      type: String
    },
    legendPadding: {
      type: Array,
      default: () => {
        return [25, 0]
      }
    },
    roseType: {
      type: String
    },
    customLegend: {
      type: Boolean,
      default: false
    },
    legendLabelSuffix: {
      type: Boolean,
      default: true
    },
    showOuter: {
      type: Boolean,
      default: false
    },
    // labelLine和hollowCenterText(空心中心文字)，只能二选一
    hollowCenterText: {
      type: [String,Number]
    }
  },
  data() {
    return {
      id: '',
      show: true,
      itemFontSize: 0
    }
  },
  created() {
    this.id = 'rankVerBar-' + Math.random()
  },
  mounted() {
    this.$nextTick(() => {
      this._initBar()
    })
  },
  updated() {
    this.$nextTick(() => {
      this._initBar()
    })
  },
  computed: {
    radius: function() {
      if (this.hollow && this.roseType != 'radius') {
        return ['50%', '70%']
      } else if (this.hollow && this.roseType == 'radius') {
        return ['15%', '55%']
      } else {
        return [0, '70%']
      }
    }
  },
  methods: {
    _customPercent(value) {
      let total = 0
      this.data.map(item => {
        total += item.count
      })
      let percent = (value / total) * 100
      percent = percent === parseInt(percent) ? percent : percent.toFixed(2)
      return percent
    },
    _initBar() {
      // console.log(this.data)
      let _this = this
      let itemGap = this.itemGap && this.legendType ? this.itemGap : document.documentElement.clientHeight * 0.0426
      // let itemGap = 0
      // let itemFontSize = document.documentElement.clientHeight * 0.013
      let itemFontSize = document.documentElement.clientHeight * 0.014
      this.itemFontSize = itemFontSize
      let source = []
      let setKey = this.setKey
      if (setKey) {
        for (let i = 0; i < this.data.length; i++) {
          source.push({
            product: this.data[i][setKey.product],
            count: this.data[i][setKey.count]
          })
        }
      } else {
        source = this.data
      }

      let option = {
        tooltip: {
          show: true,
          trigger: 'item',
          formatter: '{b}: {d}%'
        },
        color: this.color,
        legend: {
          show: !this.labelLine && !this.customLegend && this.data.length > 0,
          type: this.legendType,
          orient: 'vertical', // horizontal水平 vertical垂直
          padding: this.legendPadding,
          right: this.legendRight,
          top: 'middle',
          formatter: function(name) {
            for (var i = 0, l = source.length; i < l; i++) {
              if (source[i].product == name) {
                var ratio = source[i].ratio?source[i].ratio + '   ': '0'
                var count = source[i].count?source[i].count + '   ': '0'
                return name + '   ' + ratio + count
              }
            }
          },
          itemGap: this.itemGap,
          itemWidth: itemFontSize,
          itemHeight: itemFontSize
        },
        series: [
          {
            name: this.title,
            type: 'pie',
            startAngle: 160,
            center: this.labelLine ? ['50%', '50%'] : ['28%', '50%'],
            radius: this.radius,
            avoidLabelOverlap: true,
            roseType: this.roseType,
            minAngle: 0,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 0
            },
            label: {
              normal: {
                show: this.labelLine || this.hollowCenterText,
                // labelLine和hollowCenterText(空心中心文字)，只能二选一
                position: this.hollowCenterText ? 'center' : this.labelLine ? 'outside':'center',
                color:'#3c3c3c',
                fontWeight: 'normal',
                fontStyle: 'normal' ,
                formatter: (params)=> {
                  if(this.hollowCenterText) {
                    return this.hollowCenterText
                  } else {
                    let arr = ['{a|' + params.data.product +'}{b| ' + '  ' + params.data.count +'   ' +'}{c|' +params.data.ratio +'}']
                    return arr
                  }
                },
                fontSize: 20,
                textStyle: {
                  rich: {
                    a: {
                      fontSize: itemFontSize,
                      color: '#656565'
                    },
                    b: {
                      fontSize: itemFontSize,
                      color: '#6885F2'
                    },
                    c: {
                      fontSize: itemFontSize,
                      color: '#656565'
                    }
                  }
                },
                distanceToLabelLine: 0,
                padding: [-2, 0, 0, 0]
              },
            },
            labelLine: {
              normal: {
                show: this.labelLine,
                length: 10,
                length2: 20
              }
            }
          }
        ],
        dataset: {
          source: source
        }
      }
      if (this.showOuter) {
        option.series.push({
          type: 'pie',
          //因为是需要圆形，所以提示框之类的都不显示
          tooltip: {
            show: false
          },
          // color: '#0E6DE9',
          hoverAnimation: false, //鼠标移入变大
          center: this.labelLine ? ['50%', '50%'] : ['22%', '50%'],
          radius: ['65%', '66.2%'], //圆心空出的大小
          itemStyle: {
            normal: {
              color: '#0E6DE9',
              label: {
                show: false,
                position: 'outside'
              },
              labelLine: {
                show: false,
                length: 100,
                smooth: 0.5
              },
              borderWidth: 5,
              shadowBlur: 40
            }
          }
        })
      }
      let documentChart = document.getElementById(this.id);
      if (documentChart) {
        this.chart = this.$echarts.init(documentChart);
        this.chart.setOption(option);
      }
      window.addEventListener('resize', () => {
        itemGap = this.itemGap
        itemFontSize = document.documentElement.clientHeight * 0.013 > 14 ? 13 : document.documentElement.clientHeight
        this.chart.resize()
        setTimeout(() => {}, 300)
      })
    }
  }
}
</script>

<style lang="less" scoped>
.content {
  display: flex;
  flex-flow: column;
  position: relative;
  // background-color: #009896;
  .text-title {
    font-size: 18px;
    padding: 13px 15px;
    border-bottom: 1px solid #ddd;
  }
  .rank-content {
    flex: 1;
  }
  .legend {
    position: absolute;
    right: calc(100% - 10vh);
    padding: 0;
    display: flex;
    justify-content: space-between;
    width: 55%;
    flex-wrap: wrap;
    right: 0;
    top: 33%;
    > li {
      color: #fff;
      display: flex;
      white-space: nowrap;
      width: 50%;
      margin-bottom: 4.1666vh;
      font-size: 1.35vh;
      .legend-title {
        display: flex;
        align-items: center;
      }
      i {
        display: inline-block;
        border-radius: 2px;
        margin-right: 0.55vh;
      }
    }
  }
}
</style>
